<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-section title="个人相关" subTitle="使用单一分栏创建基础的栅格布局" type="line">
				<view class="uni-flex uni-column">
					<uni-row class="demo-uni-row" :width="nvueWidth">
						<uni-col :span="12">
							<view class=" dark">
								<view @tap="workbench" hover-class="flex-item-V-hover"
									class="flex-item flex-item-V uni-border">
									工作台(todo)
								</view>
							</view>
						</uni-col>
						<uni-col :span="12">
							<view class=" light">
								<view @tap="remind" hover-class="flex-item-V-hover"
									class="flex-item flex-item-V uni-border">
									提醒
								</view>
							</view>
						</uni-col>
						<uni-col :span="12">
							<view class=" light">
								<view @tap="collect" hover-class="flex-item-V-hover"
									class="flex-item flex-item-V uni-border">
									收藏
								</view>
							</view>
						</uni-col>
					</uni-row>



				</view>
			</uni-section>

		</view>
	</view>
</template>

<script>
	import {
		apis,
		routes
	} from '@/common/paths.js'
	export default {
		data() {
			return {
				gutter: 0,
				nvueWidth: 730
			}
		},
		methods: {
			workbench(e) {
				console.log('workbench invoke ', e)
				uni.navigateTo({
					url: "/pages/workbench/index"
				})
			},
			remind(e) {
				console.log('remind invoke ', e)
				uni.navigateTo({
					url: "/pages/mine/remind"
				})
			},
			collect(e) {
				console.log('collect invoke ', e)
				uni.navigateTo({
					url: "/pages/mine/collect"
				})
			}
		},
	}
</script>



<style lang="scss">
	.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}



	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}

	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.flex-item-V-hover {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		background-color: #777;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	.desc {
		/* text-indent: 40rpx; */
	}

	.flex-pc {
		display: flex;
		justify-content: center;
	}
</style>